<template>
	<Header></Header>
	<div v-if="dataList.length < 1">
		<el-empty description="没找到商品" />
	</div>
	<div class="container" v-else>
		<product-item :list="dataList" :row="5" />
		<div class="pagination">
			<el-pagination background layout="prev, pager, next" :total="total" />
		</div>
	</div>
</template>

<script setup>
import Header from '@/components/Header.vue';
import ProductItem from "@/components/ProductItem.vue";

import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()
const dataList = ref([]);
const total = ref(0)
const { name } = route.query;

const fetchData = async () => {
	const result = await axios.get('/data.json');
  
  // 筛选出华为的手机
  const data = result.data.data.filter(item => item.name.includes(name));

	dataList.value = data;
  total.value = data.length;
}

onMounted(() => {
	fetchData()
})

</script>

<style scoped>
.container {
	padding: 0 12px;
	padding-bottom: 40px;
}
.pagination {
  margin-top: 12px;
  display: flex;
  justify-content: end;
}
</style>